<template>
    <el-config-provider :locale="zhCn">
        <div>
            <el-form :model="formData" ref="formRef" label-width="80px">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="转正申请" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
      
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="申请日期" label-position="top" required>
                                <el-date-picker 
                                    v-model="formData.applicationTime" 
                                    type="date" 
                                    placeholder="选择日期"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                    style="width: 260px;" />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="工号" label-position="top" required>
                                <el-input 
                                    v-model="formData.workNumber" 
                                    placeholder="请输入工号" 
                                    style="width: 260px"
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="姓名" label-position="top" required>
                                <el-input 
                                    v-model="formData.regularizationName" 
                                    placeholder="请输入姓名" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="部门" label-position="top" required>
                                <el-input 
                                    v-model="formData.department" 
                                    placeholder="请输入部门" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="职位" label-position="top" required>
                                <el-input 
                                    v-model="formData.posts" 
                                    placeholder="请输入职位" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="聘用形式" label-position="top" required>
                                <el-select 
                                    v-model="formData.employmentForm" 
                                    placeholder="请选择聘用形式" 
                                    style="width: 260px"
                                    placement="bottom">
                                    <el-option label="正式" value="正式" />
                                    <el-option label="实习" value="实习" />
                                    <el-option label="兼职" value="兼职" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="身份证号" label-position="top" required>
                                <el-input 
                                    v-model="formData.identityCard" 
                                    placeholder="请输入身份证号" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="入职日期" label-position="top" required>
                                <el-date-picker 
                                    v-model="formData.onboarding" 
                                    type="date" 
                                    placeholder="选择入职日期"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                    style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                   
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="拟转正日期" label-position="top" required>
                                <el-date-picker 
                                    v-model="formData.turnPositive" 
                                    type="date" 
                                    placeholder="选择拟转正日期"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                    style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="正式薪资" label-position="top" required>
                                <el-input 
                                    v-model="formData.salary" 
                                    placeholder="请输入正式薪资" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="试用期薪资" label-position="top" required>
                                <el-input 
                                    v-model="formData.probationarySalary" 
                                    placeholder="请输入试用期薪资" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="部门主管" label-position="top" required>
                                <el-input 
                                    v-model="formData.departmentHead" 
                                    placeholder="请输入部门主管" 
                                    style="width: 260px" 
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="员工自我评价" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-table :data="selfEvaluationData" border style="width: 100%; margin-bottom: 20px;">
                        <el-table-column label="操作" width="100">
                            <template #default="scope">
                                <el-button @click="deleteSelfEvaluationRow(scope.$index)" type="danger" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="试用期工作成果描述" label-position="top" required>
                                <el-input 
                                    v-model="formData.description" 
                                    type="textarea"
                                    :rows="4"
                                    placeholder="请输入试用期工作成果描述" 
                                    style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="试用期综合自我评价" label-position="top" required>
                                <el-input 
                                    v-model="formData.selfEvaluation" 
                                    type="textarea"
                                    :rows="4"
                                    placeholder="请输入试用期综合自我评价" 
                                    style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                                     
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="部门主管评价" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-table :data="supervisorEvaluationData" border style="width: 100%; margin-bottom: 20px;">
                        <el-table-column label="操作" width="100">
                            <template #default="scope">
                                <el-button @click="deleteSupervisorEvaluationRow(scope.$index)" type="danger" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="平均得分" label-position="top" required>
                                <el-input 
                                    v-model="formData.averageScore" 
                                    placeholder="请输入平均得分" 
                                    style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="评价等级" label-position="top" required>
                                <el-select 
                                    v-model="formData.evaluationLevel" 
                                    placeholder="请选择评价等级" 
                                    style="width: 260px">
                                    <el-option label="优秀" value="优秀" />
                                    <el-option label="良好" value="良好" />
                                    <el-option label="合格" value="合格" />
                                    <el-option label="不合格" value="不合格" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="是否通过试用期" label-position="top" required>
                                <el-select 
                                    v-model="formData.supervisor" 
                                    placeholder="请选择是否通过" 
                                    style="width: 260px">
                                    <el-option label="通过" value="通过" />
                                    <el-option label="不通过" value="不通过" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="HR确认" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="正式转正日期" label-position="top" required>
                                <el-date-picker 
                                    v-model="formData.officialDate" 
                                    type="date" 
                                    placeholder="选择正式转正日期"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                    style="width: 260px" />
                            </el-form-item>                       
                        </div>
                    </el-col>
                    
                    <el-col :span="12">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="HR确认" label-position="top" required>
                                <el-select 
                                    v-model="formData.hrConfirm" 
                                    placeholder="请选择HR确认状态" 
                                    style="width: 260px">
                                    <el-option label="已确认" value="已确认" />
                                    <el-option label="未确认" value="未确认" />
                                    <el-option label="已拒绝" value="已拒绝" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    
                </el-row>
                
                <hr>
                <el-form-item style="margin-top: 6px;">
                    <el-button type="primary" @click="saveData">保存</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-config-provider>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { ElMessage } from 'element-plus'; 
import axios from 'axios';
import zhCn from 'element-plus/es/locale/lang/zh-cn';

// 表单引用
const formRef = ref(null);

// 表单数据
const formData = ref({
    regularizationId: null,
    workNumber: '',
    regularizationName: '',
    applicationTime: '',
    department: '',
    posts: '',
    employmentForm: '',
    identityCard: '',
    onboarding: '',
    turnPositive: '',
    salary: '',
    probationarySalary: '',
    description: '',
    selfEvaluation: '',
    supervisorEvaluation: '',
    averageScore: '',
    evaluationLevel: '',
    probationPeriod: '',
    supervisor: '',
    officialDate: '',
    hrConfirm: '',
    departmentHead: ''
});

// 员工自我评价数据
const selfEvaluationData = ref([
    {
        evaluationItem: '工作能力',
        score: '',
        description: '',
        excellent: '',
        good: '',
        qualified: ''
    }
]);

// 部门主管评价数据
const supervisorEvaluationData = ref([
    {
        evaluationItem: '工作能力',
        score: '',
        description: '',
        excellent: '',
        good: '',
        qualified: ''
    }
]);

// 添加员工自我评价行
const addSelfEvaluationRow = () => {
    selfEvaluationData.value.push({
        evaluationItem: '',
        score: '',
        description: '',
        excellent: '',
        good: '',
        qualified: ''
    });
};
// 删除员工自我评价行
const deleteSelfEvaluationRow = (index) => {
    if (selfEvaluationData.value.length > 1) {
        selfEvaluationData.value.splice(index, 1);
    } else {
        ElMessage.warning('至少保留一行数据');
    }
};

// 添加部门主管评价行
const addSupervisorEvaluationRow = () => {
    supervisorEvaluationData.value.push({
        evaluationItem: '',
        score: '',
        description: '',
        excellent: '',
        good: '',
        qualified: ''
    });
};

// 删除部门主管评价行
const deleteSupervisorEvaluationRow = (index) => {
    if (supervisorEvaluationData.value.length > 1) {
        supervisorEvaluationData.value.splice(index, 1);
    } else {
        ElMessage.warning('至少保留一行数据');
    }
};
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields();
    }
    selfEvaluationData.value = [{
        evaluationItem: '工作能力',
        score: '',
        description: '',
        excellent: '',
        good: '',
        qualified: ''
    }];
    supervisorEvaluationData.value = [{
        evaluationItem: '工作能力',
        score: '',
        description: '',
        excellent: '',
        good: '',
        qualified: ''
    }];
};

const props = defineProps({
    regularizationId: {
        type: Number,
        default: null
    }
});
// 组件挂载时加载数据
onMounted(() => {
    if (props.regularizationId) {
        loadDetailData(props.regularizationId);
    }
});

watch(() => props.regularizationId, (newId) => {
    if (newId) {
        loadDetailData(newId);
    } else {
        resetForm();
    }
});
const loadDetailData = async (id) => {
    if (!id) return;
    
    try {
        const response = await axios.get(`/api/regularization/${id}`);
        if (response.data.code === 200) {
            const data = response.data.data;
            formData.value = {
                regularizationId: data.id || data.regularizationId,
                workNumber: data.workNumber || '',
                regularizationName: data.regularizationName || data.name || '',
                applicationTime: data.applicationTime || '',
                department: data.department || '',
                posts: data.posts || data.position || '',
                employmentForm: data.employmentForm || '',
                identityCard: data.identityCard || data.idCard || '',
                onboarding: data.onboarding || data.entryDate || '',
                turnPositive: data.turnPositive || data.expectedRegularizationDate || '',
                salary: data.salary || data.officialSalary || '',
                probationarySalary: data.probationarySalary || data.trialSalary || '',
                description: data.description || data.workResultsDescription || '',
                selfEvaluation: data.selfEvaluation || data.selfAssessment || '',
                averageScore: data.averageScore || '',
                evaluationLevel: data.evaluationLevel || '',
                supervisor: data.supervisor || data.isPassProbation || '',
                officialDate: data.officialDate || data.officialRegularizationDate || '',
                hrConfirm: data.hrConfirm || data.hrConfirmation || '',
                departmentHead: data.departmentHead || data.departmentManager || '',
            };
            
            if (data.selfEvaluationItems) {
                selfEvaluationData.value = data.selfEvaluationItems;
            }
            
            if (data.supervisorEvaluationItems) {
                supervisorEvaluationData.value = data.supervisorEvaluationItems;
            }
        }
    } catch (error) {
        console.error('获取详情失败:', error);
        ElMessage.error('获取详情失败');
    }
};
const saveData = async () => {
    try {
        // 验证表单
        await formRef.value.validate();
        
        // 构造要提交的数据
        const submitData = {
            ...formData.value,
            selfEvaluationItems: selfEvaluationData.value,
            supervisorEvaluationItems: supervisorEvaluationData.value
        };
        
        let response;
        if (formData.value.regularizationId) {
            // 更新操作
            response = await axios.put(`/api/regularization/${formData.value.regularizationId}`, submitData);
        } else {
            // 新增操作
            response = await axios.post('/api/regularization', submitData);
        }
        
        if (response.data.code === 200) {
            ElMessage.success(formData.value.regularizationId ? '更新成功' : '新增成功');
            // 触发父组件刷新列表
            emits('refresh');
        } else {
            ElMessage.error(response.data.message || '操作失败');
        }
    } catch (error) {
        console.error('保存失败:', error);
        ElMessage.error('保存失败: ' + (error.response?.data?.message || error.message));
    }
};
const rules = ref({
    workNumber: [{ required: true, message: '请输入工号', trigger: 'blur' }],
    regularizationName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    department: [{ required: true, message: '请输入部门', trigger: 'blur' }],
    posts: [{ required: true, message: '请输入职位', trigger: 'blur' }],
});
const emits = defineEmits(['refresh']);
</script>

<style scoped>
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    overflow: hidden;
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
}

.el-radio.is-checked .radio-custom {
    background-color: #61c3ea;
    border-color: #409EFF;
}
</style>